<template>
    <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
        <el-card>
            <span style="font-size: 13px">项目编号：{{formData.projectCode}}</span>
            <span style="font-size: 13px;margin-left: 3%">项目名称：{{formData.projectName}}</span>
            <span style="font-size: 13px;margin-left: 3%">项目预算：{{formData.budget}}</span>
            <span style="margin-left: 2px;font-size: 13px">元</span>
            <span style="font-size: 13px;margin-left: 3%">采购类别：
                  <span v-if="formData.purchaseCategoryId === 1">货物类</span>
                  <span v-else-if="formData.purchaseCategoryId === 2">服务类</span>
                  <span v-else-if="formData.purchaseCategoryId === 3">工程类</span>
            </span>
        </el-card>
        <div style="margin-top: 14px;margin-bottom: 10px">
            <el-table
                    :data="purchaseTable"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="goodsName"
                        min-width="30px"
                        label="货物名称"
                >
                </el-table-column>
                <el-table-column
                        prop="modelType"
                        min-width="30px"
                        label="规格及技术要求"
                >
                    <template slot-scope="scope">
                        <div class="ellipses-container" @click="contentDetail = true">{{ scope.row.modelType }}</div>
                        <el-dialog
                                title="规格及技术要求"
                                :visible.sync="contentDetail"
                                width="60%"
                                center>
                            {{ scope.row.modelType }}
                        </el-dialog>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        min-width="30px"
                        label="单价(元)"
                >
                </el-table-column>
                <el-table-column
                        prop="num"
                        min-width="30px"
                        label="数量"
                >
                </el-table-column>
                <el-table-column
                        prop="summoney"
                        min-width="30px"
                        label="金额(元)">
                </el-table-column>
            </el-table>
        </div>
        <div style="font-size: 15px;margin-top: 20px;">总金额：{{ TotalMoney ? TotalMoney + ' 元' : '0 元' }}</div>
        <br>
        <el-card :model="approveData">
            <div style="margin-top: 15px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">供应商资格条件：</div>
            <div style="font-size: 13px;margin-top: 15px;display: inline-block">
                <el-input :readonly="true" v-model="approveData.quacondition" placeholder="输入内容" style="width: 540px" type="textarea" :rows="6"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">服务项目主要内容：</div>
            <div style="font-size: 13px;margin-top: 30px;display: inline-block">
                <el-input :readonly = "true" v-model="approveData.serviceProjectContent" placeholder="输入内容" style="width: 540px" type="textarea" :rows="3"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">维保期限(年)：</div>
            <div style="font-size: 13px;margin-top: 30px;display: inline-block">
                <el-input :readonly = "true" v-model="approveData.maintenancePeriod"  style="width: 130px"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">交货(服务、建设)地点：</div>
            <div style="display: inline-block;margin-top: 30px">
                <el-input v-model="approveData.deliveryPlace" :readonly = "true" style="width: 540px"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">交货(服务、建设)时间：</div>
            <div style="display: inline-block;margin-top: 30px">
                <el-input v-model="approveData.deliveryTime" style="width: 540px;white-space: pre-wrap" :readonly = "true"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">付款方式：</div>
            <div style="display: inline-block;margin-top: 30px">
                <el-input v-model="approveData.payMethod"  style="width: 540px;white-space: pre-wrap" type="textarea" :rows="3" :readonly = "true"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">项目售后：</div>
            <div style="display: inline-block;margin-top: 30px">
                <el-input v-model="approveData.projectAfterSale" placeholder="输入内容" style="width: 540px" type="textarea" :rows="3" :readonly = "true"></el-input>
            </div>
            <br>
            <div style="margin-top: 30px;font-size: 13px;display: inline-block;vertical-align: top;width: 150px;text-align:right">审批意见：</div>
            <div style="display: inline-block;margin-top: 30px">
                <el-input v-model="approveData.quaSuggestion" placeholder="输入内容" style="width: 540px" type="textarea" :rows="3" ></el-input>
            </div>
            <div style="margin-left: 80px;margin-top: 30px">
                <span style="font-size: 13px;margin-left: 3%;width: 150px">审批状态：{{QuaApproveStatus}}</span>
            </div>
            <div style="margin-left: 220px;margin-top: 30px;">
                <span>
                    <el-button v-if="QuaApproveStatus==='未审批'" @click="approve" type="primary">审批通过</el-button>
                </span>
                <span style="margin-left: 40px;">
                    <el-button v-if="potentialsupplierSubmitStatus!=='已提交'" @click="approveReturn" type="primary">退 回</el-button>
                </span>
                <span style="margin-left: 40px;">
                    <el-button @click="goBack" type="primary">取 消</el-button>
                </span>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {projectApprove, projectUnapproved, reqApproveGet, reqPurchaseList} from "@/api/purchaseItemManage";

    export default {
        name: "approvalItemManage",
        data() {
            return {
                formData: {
                    projectId: '',
                    projectCode: '',
                    projectName: '',
                    purchaseCategoryId: '',
                    budget: '',
                },
                approveData: {
                    projectId: '',
                    quacondition: '',
                    serviceProjectContent: '',
                    projectDuration: '',
                    deliveryPlace:'',
                    deliveryTime: '',
                    maintenancePeriod:'',
                    projectAfterSale:'',
                    quaSuggestion:'',
                },
                purchaseTable:[],
                total: 0,
                TotalMoney: '',
                QuaApproveStatus:'',
                potentialsupplierSubmitStatus:'',
                contentDetail: false
            }
        },
        created() {
            // 接收路由传递的数据
            this.formData.projectId = this.$route.params.projectId;
            this.formData.projectCode = this.$route.params.projectCode;
            this.formData.projectName = this.$route.params.projectName;
            this.formData.purchaseCategoryId = this.$route.params.purchaseCategoryId;
            this.formData.budget = this.$route.params.budget;

            this.getPurchaseList(this.formData.projectId)
            this.approveGet()
        },
        methods: {
            //返回
            goBack() {
                this.$router.push('supplierQualificationApproval');
            },

            //获取采购清单
            async getPurchaseList(projectId){
                let res =await reqPurchaseList(projectId)
                if(res.data.code===200){
                    this.purchaseTable=res.data.data.records;
                    this.TotalMoney=res.data.data.totalMoney;
                    this.total = res.data.data.total;
                }
            },

            //获取提交审批数据
            async approveGet() {
                let res = await reqApproveGet(this.formData.projectId)
                if(res.data.code===200){
                    this.approveData = res.data.data
                    this.QuaApproveStatus = res.data.data.quaApproveStatus
                    this.potentialsupplierSubmitStatus = res.data.data.potentialsupplierSubmitStatus
                }else {
                    this.$message.error(res.data.msg);
                }
            },

            //审批通过
            async approve() {
                const inputObj = {
                    projectId: this.formData.projectId,
                    quaSuggestion: this.approveData.quaSuggestion
                }
                this.$confirm('确定审批通过吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res =await projectApprove(inputObj)
                    if(res.data.code===200){
                        this.$message.success('审批通过！')
                        await this.$router.push('supplierQualificationApproval')
                    }else {
                        this.$message.error(res.data.msg);
                    }
                })
            },

            //退回
            async approveReturn(){
                const inputObj = {
                    projectId: this.formData.projectId,
                    quaSuggestion: this.approveData.quaSuggestion
                }
                this.$confirm('确定退回吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res =await projectUnapproved(inputObj)
                    if(res.data.code===200){
                        this.$message.success('已退回！')
                        await this.$router.push('supplierQualificationApproval')
                    }else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .ellipses-container {
        width: 150px; /* 设置容器宽度 */
        white-space: nowrap; /* 防止内容换行 */
        overflow: hidden; /* 隐藏超出容器宽度的部分 */
        text-overflow: ellipsis; /* 超出容器宽度时显示省略号 */
        cursor: pointer;
    }


</style>
